// 导入React核心功能
import React, { useState } from 'react'
// 导入moment库用于时间格式化
import moment from 'moment'
// 导入组件样式
import styles from './TableStep.module.scss'
// 导入Ant Design表格、按钮和间距组件
import { Table, Button, Space } from 'antd'
// 导入Ant Design表格列类型定义
import type { TableColumnsType } from 'antd'

// 导入试卷列表类型定义
import type { ExaminationItem } from '@/service/type'

/**
 * 定义表格行数据类型，继承自examlistType
 * key - 行唯一标识
 * name - 试卷名称
 * category - 科目分类
 * creator - 创建人
 */
interface DataType extends ExaminationItem {
  key: React.Key
  name: string
  category: string
  creator: string
  createTime: string
}

/**
 * 定义组件props接口
 * changeStep - 切换步骤的回调函数
 * subject - 可选，科目分类筛选条件
 */
interface Props {
  changeStep: (values: number, data?: any) => void
  subject?: ExaminationItem[]
}

// 表格列配置数组
const columns: TableColumnsType<DataType> = [
  {
    title: '试卷名称',    // 列标题
    dataIndex: 'name',   // 对应数据中的字段名
    render: (text: string) => <a>{text}</a>, // 自定义渲染为链接样式
  },
  {
    title: '科目分类',
    dataIndex: 'category',
  },
  {
    title: '试卷创建人',
    dataIndex: 'creator',
  },
  {
    title: '试卷创建时间',
    dataIndex: 'createTime',
    render: (text: string) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
  }
]

// 表格步骤组件
const TableStep: React.FC<Props> = ({ changeStep, subject }) => {
  // 存储选中的行key
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  // 存储选中的行数据
  const [selectedRow, setSelectedRow] = useState<DataType | null>(null)

  /**
   * 处理表格行选择变化
   * @param selectedRowKeys 选中的行key数组
   * @param selectedRows 选中的行数据数组
   */
  const onSelectChange = (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    setSelectedRowKeys(selectedRowKeys) // 更新选中key
    setSelectedRow(selectedRows[0] || null) // 更新选中行数据
  }

  /**
   * 下一步按钮点击处理
   */
  const onNextClick = () => {
    if (selectedRow) {
      // 从localStorage获取现有表单数据
      const savedData = localStorage.getItem('examFormData')
      const formData = savedData ? JSON.parse(savedData) : {}
      // 合并选中的试卷数据
      const newData = {
        ...formData,
        selectedPaper: selectedRow
      }
      // 保存到localStorage
      localStorage.setItem('examFormData', JSON.stringify(newData))
      // 通知父组件切换到下一步(预览)
      changeStep(1, newData)
    } else {
      // 没有选择时直接切换步骤
      changeStep(1)
    }
  }

  // 表格行选择配置
  const rowSelection = {
    selectedRowKeys,  // 当前选中的key
    onChange: onSelectChange, // 选择变化回调
    type: 'radio' as const, // 单选模式
  }


  // 组件渲染
  return (
    <div className={styles.TableStep}>
      {/* 显示当前筛选科目信息 */}
      {subject && subject.length > 0 && <div style={{ marginBottom: 16 }}>
        当前筛选科目: {subject[0].classify?.name} (共 {subject.length} 条数据)
      </div>}
      
      {/* 试卷选择表格 */}
      <Table<DataType>
        className={styles.table}
        rowSelection={rowSelection}  // 行选择配置
        columns={columns}           // 列配置
        dataSource={subject?.map(item => ({
          ...item,
          key: item._id,
          name: item.name || '',
          category: item.classify?.name || '',
          creator: item.creator || '空',
          createTime: item.createdAt || ''
        }))}       // 转换后的数据源
        rowKey="key"                // 行key字段
        locale={{
          emptyText: subject 
            ? `没有找到与【${subject}】匹配的试卷`  // 有筛选条件时的空提示
            : '暂无试卷数据'                     // 默认空提示
        }}
      />
      
      {/* 操作按钮区域 */}
      <Space>
          {/* 上一步按钮 */}
          <Button type="primary" onClick={() => changeStep(-1)}>上一步</Button>
          {/* 下一步按钮，未选择时禁用 */}
          <Button 
            type="primary" 
            onClick={onNextClick}
            disabled={!selectedRow}
          >
            下一步
          </Button>
      </Space>
    </div>
  )
}

// 默认导出表格步骤组件
export default TableStep
